﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/src/css/main.css">
    <link rel="stylesheet" type="text/css" href="/src/css/material.css">
    <link rel="stylesheet" type="text/css" href="/src/bootstrap-3.3.7-dist/css/bootstrap.min.css">
   
</head>

<body>
    
    <div id="materialVue" class="wrapper">
        <embed class="embed-wrapper" src="../top.html" />
        <!-- <div class="main-content"> -->
        <div class="content-wrapper">
            <ol class="breadcrumb">
                <li>
                    <a href="#">面料</a>
                    <a>/</a>
                    <a class="active">面料选择</a>
                </li>
            </ol>
            <div class="selected-list">
                <strong>已选大类：</strong>
                <span class="label label-default">男装</span>
                <span class="label label-default">上装</span>
                <span class="label label-default">衬衣</span>
            </div>
            <div style="position: relative; height: 210px;width: 100%;margin-top: 20px;">
                <ul class="nav nav-tabs">
                    <li role="presentation" class="tab bgbl active" v-on:click="checkPane('bgbl')">
                        <a href="#bgbl">
                            <strong>包工包料</strong>
                        </a>
                    </li>
                    <li role="presentation" class="tab bbl" v-on:click="checkPane('bbl')">
                        <a href="#bbl">
                            <strong>半包料</strong>
                        </a>
                    </li>
                    <li role="presentation" class="tab qjg" v-on:click="checkPane('qjg')">
                        <a href="#qjg">
                            <strong>轻加工</strong>
                        </a>
                    </li>
                </ul>
                <div class=" tab-pane active" id="bgbl">
                    <p style="margin: 5px;">请选择你所需要的物料：</p>
                    <div class="list-group">
                        <strong class="li-title">主料：</strong>
                        <ul @click="chooseMainM" class="item-list">
                            <li v-for="(item,index) in mainMaterial" :id="item.id" class="li-item">{{item.text}}</li>
                        </ul>
                    </div>

                    <div class="list-group">
                        <strong class=" li-title">辅料：</strong>
                        <ul @click="chooseOther" class="item-list">
                            <li v-for="(item,index) in accessories" :id="item.id" class="li-item">{{item.text}}</li>
                        </ul>
                    </div>
                    <div class="list-group">

                        <strong class=" li-title">其他工艺：</strong>
                        <ul @click="chooseOther" class="item-list">
                            <li v-for="(item,index) in technics" :id="item.id" class="li-item">{{item.text}}</li>
                        </ul>
                    </div>
                </div>
                <div class=" tab-pane" id="bbl">
                    <p style="margin: 5px;">请选择你所需要的物料：</p>
                    <strong class=" li-title">辅料：</strong>
                    <ul @click="chooseOther" class="item-list">
                        <li v-for="(item,index) in accessories" :id="item.id" class="li-item">{{item.text}}</li>
                    </ul>

                </div>
                <div class=" tab-pane" id="qjg">
                    <p style="margin: 5px;">请选择你所需要的物料：</p>
                    <strong class=" li-title">其他工艺：</strong>
                    <ul @click="chooseOther" class="item-list">
                        <li v-for="(item,index) in technics" :id="item.id" class="li-item">{{item.text}}</li>
                    </ul>
                </div>
            </div>
            <div class="slected-wuxl">
                <strong>已选择的物料项目和服务：</strong>
                <div class="selected-item-show">
                   <span v-for="(item,index) in selectedTabList" :id="item.id"
                        class="label label-default selected">{{item.text}}</span>
                </div>
            </div>
            <div class="action-btn">
                <button type="button" class="btn btn-success" @click="goNext">下一步</button>

            </div>
        </div>
        <embed class="embed-wrapper" src="../footer.html">
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="/src/js/jquery.min.2.1.4.js"></script>
<script type="text/javascript" src="/src/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="../js/common.js"></script> -->
<script type="text/javascript">
    var materialVue = new Vue({
        el: '#materialVue',
        data:function() {
            return {
                // main-metrail 主料  accessories：辅料  technics:工艺
                mainMaterial: [
                    {
                        id: 'm-m-1',
                        text: '大身料'
                    },
                    {
                        id: 'm-m-2',
                        text: '拼接料'
                    },
                    {
                        id: 'm-m-3',
                        text: '里料'
                    }
                ],
                accessories: [
                    {
                        id: 'a-1',
                        text: '粘合衬'
                    },
                    {
                        id: 'a-2',
                        text: '拉链'
                    },
                    {
                        id: 'a-3',
                        text: '纽扣'
                    },
                    {
                        id: 'a-4',
                        text: '魔术贴'
                    },
                    {
                        id: 'a-5',
                        text: '绳'
                    },
                    {
                        id: 'a-6',
                        text: '带'
                    },
                    {
                        id: 'a-7',
                        text: '皮标'
                    },
                    {
                        id: 'a-8',
                        text: '饰件'
                    },
                    {
                        id: 'a-9',
                        text: '填充物'
                    },
                    {
                        id: 'a-10',
                        text: '吊牌'
                    },
                    {
                        id: 'a-11',
                        text: '胶带'
                    },
                    {
                        id: 'a-12',
                        text: '不干胶'
                    },
                    {
                        id: 'a-13',
                        text: '主唛'
                    },
                    {
                        id: 'a-14',
                        text: '洗水唛'
                    },
                    {
                        id: 'a-15',
                        text: '尺码唛'
                    },
                ],
                technics: [
                    {
                        id: 't-1',
                        text: "印花"
                    },
                    {
                        id: 't-2',
                        text: "绣花"
                    },
                    {
                        id: 't-3',
                        text: "水洗"
                    },
                    {
                        id: 't-4',
                        text: "整烫"
                    },
                    {
                        id: 't-5',
                        text: "打吊牌"
                    },
                    {
                        id: 't-6',
                        text: "装袋"
                    },
                    {
                        id: 't-7',
                        text: "装箱"
                    },
                ],
                selectedTabList: []
            }
        },
        methods: {
            checkPane: function (pane) {
                // alert(1);
                $('.active').removeClass('active');
                $('.' + pane).addClass('active');
            },
            // 选择主料
            chooseMainM: function (e) {
                if (e.target.className.indexOf('li-item') > -1) {
                    let dom = e.target;
                    let jqueryObj = $(dom);
                    let _index = jqueryObj.attr('id');
                    var text = jqueryObj.html();

                    if (jqueryObj.hasClass('zhuliao-active')) {
                        $('.zhuliao-active').removeClass('zhuliao-active');
                        this.removeChooseTab(_index);
                    } else {
                        var _id = $(".zhuliao-active").attr("id");
                        $('.zhuliao-active').removeClass('zhuliao-active');
                        this.removeChooseTab(_id);
                        jqueryObj.addClass("zhuliao-active");
                        this.addChoseTab(_index, text);
                    }
                    // 必须选择主料
                    if ($('.zhuliao-active').length == 0) {
                        $('#m-m-1').addClass("zhuliao-active");
                        this.addChoseTab('m-m-1', '大身料');
                    }
                }
            },
            chooseOther: function (e) {
                if (e.target.className.indexOf('li-item') > -1) {
                    let dom = e.target;
                    let jqueryObj = $(dom);
                    let _index = jqueryObj.attr('id');
                    var text = jqueryObj.html();
                    if (jqueryObj.hasClass('active-fl-gy')) {
                        jqueryObj.removeClass('active-fl-gy');
                        this.removeChooseTab(_index);
                    } else {
                        jqueryObj.addClass("active-fl-gy");
                        this.addChoseTab(_index, text);
                    }
                }
            },
            addChoseTab: function (_id, _text) {
                this.selectedTabList.forEach(function(element){
                    if (element.id === _id) {
                        return flase;
                    }
                });
                this.selectedTabList.push({
                    id: _id,
                    text: _text
                })
            },
            removeChooseTab: function (_id) {
                this.selectedTabList.forEach(function(element) {
                    if (element.id === _id) {
                        var index = this.selectedTabList.indexOf(element);
                        this.selectedTabList.splice(index, 1);
                    }
                });
            },
            goNext: function () {
                window.location.href= "materialConfirm.html?selectedTabList="+JSON.stringify(this.selectedTabList);
            }
        },
        mounted: function () {
            $('#m-m-1').addClass("zhuliao-active");
            this.selectedTabList.push({
                id: 'm-m-1',
                text: '大身料'
            });
            debugger;
            console.log(this.selectedTabList);
        }
    })
</script>